// useState实现一个计数器按钮
import { useState } from "react";
// App 根组件
function App() {
  // 1.调用useState添加一个状态变量
  // 返回一个数组，count:状态变量 setCount:修改状态变量的方法
  let [count, setCount] = useState(0);

  const handleClick = () => {
    // count++;
    // console.log(count); 可以更新数据,但不能驱动视图更新
    setCount(count + 1);
  };

  // 对象类型的状态变量
  const [form, setForm] = useState({ name: "张三", age: 18 });
  const changeName = () => {
    /* form.name = "李四";
    console.log(form); // 可以更新数据,但不能驱动视图更新 */
    // 整体替换form的值
    setForm({
      ...form,
      name: "李四",
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>点我加一</button>
      <button onClick={() => setCount(count - 1)}>点我减一</button>
      <span>{count}</span>
      <button onClick={changeName}>点我修改name</button>
      <span>{form.name}</span>
    </div>
  );
}
// 暴露App组件
export default App;
